<script lang="ts" setup>
import { CarOrderStatus } from '@/constants/orders';
import { RouteMap, useRouter } from '@/router';
import { useLocale } from '@/locale/locale';
import { onMounted, ref, watch } from 'vue';

const { t } = useLocale();
const router = useRouter();

const props = defineProps<{
  index: number;
  orderSn: string;
  orderType: string;
  serviceType: string;
  bookDate: string;
  bookTime: string;
  actualAmount: number;
  orderAmount: number;
  status: string;
  countdown: number;
  startAddress: string;
  endAddress: string;
  carTypeName: string;
  createdAt: string;
}>();

const orderStatus = ref('');

defineEmits(['cancel']);

function handleCountDownEnd() {
  orderStatus.value = CarOrderStatus.CANCEL;
}

watch(
  () => props.status,
  (newVal, oldVal) => {
    orderStatus.value = newVal;
  }
);

onMounted(() => {
  orderStatus.value = props.status;
});
</script>

<template>
  <view class="order-card">
    <view @click="router.to(RouteMap.carOrderDetail, { orderSn })">
      <view class="flex justify-between items-center mb-2">
        <text class="text-sm text-primary font-medium">
          {{ serviceType == 'PICKUP' ? t('TransferPickAirport') : t('TransferOrderPickCar') }}
        </text>
        <view class="flex justify-end items-center flex-1">
          <apt-count-down
            v-if="orderStatus === CarOrderStatus.WAIT_PAY"
            :countdown="countdown"
            @end="handleCountDownEnd"
          />
          <text
            v-else-if="orderStatus === CarOrderStatus.ORDER_SUCCESS"
            class="text-sm text-primary"
          >
            {{ t('LOKey_orderReservationSuccess') }}
          </text>
          <text
            v-else-if="orderStatus === CarOrderStatus.WAIT_CONFIRM"
            class="text-sm text-primary"
          >
            {{ t('OrderListWaitConfim') }}
          </text>
          <template v-else-if="orderStatus == CarOrderStatus.OVERDUE">
            <text class="text-sm text-fourth">{{ t('OrderListOverdue') }}</text>
          </template>
          <template v-else>
            <text class="text-sm text-fourth">{{ t('LOKey_orderCancel') }}</text>
          </template>
        </view>
      </view>
      <view class="order-card-title text-lg text-primary font-medium mb-1">
        <view :class="orderType == 'INNN' ? 'innn' : ''">
          {{ orderType == 'INNN' ? 'INNN' : t('TransferHouseSelf') }}
        </view>
        {{ carTypeName }}
      </view>
      <view class="text-sm text-fourth mb-1">
        {{ t('TransferOrderGetCar') }}：{{ startAddress }}
      </view>
      <view class="text-sm text-fourth mb-1">{{ t('TransferOrderOffCar') }}：{{ endAddress }}</view>
      <view class="text-sm text-fourth mb-1">
        {{ t('TransferOrderVehicleTime') }}：{{ bookDate + ' ' + bookTime }}
      </view>
      <view class="flex justify-end items-baseline mt-2_5">
        <template v-if="orderStatus === CarOrderStatus.WAIT_PAY">
          <text class="text-sm text-primary">{{ t('LOKey_shouldPay') }}</text>
          <text class="text-lg text-primary font-medium">
            {{ t('LPKey_moneyX', { money: Math.round(actualAmount) }) }}
          </text>
        </template>
        <template v-else>
          <text class="text-sm text-primary">{{ t('LOKey_orderAmount') }}</text>
          <text class="text-lg text-primary font-medium">
            {{ t('LPKey_moneyX', { money: Math.round(orderAmount) }) }}
          </text>
        </template>
      </view>
    </view>
    <view
      v-if="orderStatus === CarOrderStatus.WAIT_PAY"
      class="mt-2_5 flex justify-end items-center"
    >
      <uv-button
        :text="t('LOKey_cancelReservation')"
        size="small"
        @click.stop="$emit('cancel', orderSn)"
      />
      <uv-button
        :text="t('LRKey_payNow')"
        custom-style="margin-left: 20rpx; background: #FF5A60;border-color: #FF5A60"
        size="small"
        type="primary"
        @click.stop="
          router.to(RouteMap.payment, {
            id: orderSn,
            countdown: Math.abs(countdown),
            amount: actualAmount,
            createTime: createdAt,
            from: 'car',
            isFromOrder: true,
            orderIndex: index
          })
        "
      />
    </view>
    <!--    <view v-else class="mt-2_5 flex justify-end items-center">-->
    <!--      <uv-button-->
    <!--        size="small"-->
    <!--        :text="t('DiningPreOrderBookAgain')"-->
    <!--        @click.stop="router.to(RouteMap.home)"-->
    <!--      />-->
    <!--    </view>-->
  </view>
</template>

<style lang="scss">
.order-card {
  width: 702rpx;
  padding: 32rpx;
  background-color: #fff;
  border-radius: 16rpx;

  &__count-down {
    padding: 0 16rpx;
    font-size: 28rpx;
    line-height: 40rpx;
    background: #fde2b2;
    border-radius: 4rpx;
    color: #b84c16;
  }

  &-title {
    display: flex;
    align-items: center;

    view {
      background: #12c584;
      border-radius: 4rpx;
      height: 30rpx;
      line-height: 30rpx;
      padding: 0 4rpx;
      font-weight: 500;
      font-size: 18rpx;
      color: #ffffff;
      margin-right: 8rpx;

      &.innn {
        background: #fc752f;
      }
    }
  }
}
</style>
